<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录日志</title>
    <link rel="stylesheet" href="logging.css">
</head>
<body>
<button onclick="navigateToLink1()">菜单栏</button>
<h1>用户登录日志</h1>
<table id="data-table">
    <thead>
        <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>登录时间</th>
            <th>IP地址</th>
            <th>登陆状态</th>
        </tr>
    </thead>
    <tbody>
        <!-- 数据行将在这里被插入 -->
    </tbody>
</table>
<div id="pagination">
    <button id="first-page" onclick="firstPage()">首页</button>
    <button id="prev-page" onclick="prevPage()">上一页</button>
    <span id="page-info"></span>
    <button id="next-page" onclick="nextPage()">下一页</button>
    <button id="last-page" onclick="lastPage()">尾页</button>
</div>
</body>
<script>
    let currentPage = 1;
    let itemsPerPage = 10; // 每页显示的项目数
    let allData = []; // 用于存储从服务器获取的所有数据

    // 定义一个函数来执行Ajax请求并更新表格数据
    function fetchData() {
        const xhr = new XMLHttpRequest();
        xhr.open('POST', '/data1', true);
        xhr.onload = function() {
            if (xhr.status >= 200 && xhr.status < 300) {
                allData = JSON.parse(xhr.responseText);
                updateTable(currentPage); // 更新表格以显示当前页的数据
                updatePagination(); // 更新分页按钮的状态
            } else {
                console.error('请求失败，状态码：', xhr.status);
            }
        };
        xhr.send();
    }

    // 更新表格以显示指定页的数据
    function updateTable(page) {
        const tbody = document.querySelector('#data-table tbody');
        tbody.innerHTML = '';

        const startIndex = (page - 1) * itemsPerPage;
        const endIndex = startIndex + itemsPerPage;
        const pageData = allData.slice(startIndex, endIndex);

        pageData.forEach(item => {
            const tr = document.createElement('tr');
            // 创建单元格并设置内容
                    const idCell = document.createElement('td');
                    idCell.textContent = item.id;
                    tr.appendChild(idCell);

                    const usernameCell = document.createElement('td');
                    usernameCell.textContent = item.username;
                    tr.appendChild(usernameCell);

                    const timeCell = document.createElement('td');
                    // 将ISO格式的日期时间字符串转换为本地时间字符串
                    const localTime = new Date(item.time).toLocaleString();
                    timeCell.textContent = localTime;
                    tr.appendChild(timeCell);

                    // 新增IP地址单元格
                    const ipCell = document.createElement('td');
                    ipCell.textContent = item.ip; // 假设返回的JSON数据中包含ip字段
                    tr.appendChild(ipCell);

                    const statusCell = document.createElement('td');
                    statusCell.textContent = item.status; // 假设返回的JSON数据中包含status字段
                    // 可选：根据状态设置单元格的样式
                    if (item.status === 'successful') {
                        statusCell.style.backgroundColor = 'green';
                    } else {
                        statusCell.style.backgroundColor = 'red';
                    }
                    tr.appendChild(statusCell);
            tbody.appendChild(tr);
        });
    }

    // 更新分页按钮的状态
    function updatePagination() {
        const totalPages = Math.ceil(allData.length / itemsPerPage);
        const pageInfo = document.getElementById('page-info');
        const prevButton = document.getElementById('prev-page');
        const nextButton = document.getElementById('next-page');
        const firstPageButton = document.getElementById('first-page');
        const lastPageButton = document.getElementById('last-page');

        pageInfo.textContent = `第 ${currentPage} 页 / 共 ${totalPages} 页`;

        prevButton.disabled = currentPage === 1;
        nextButton.disabled = currentPage === totalPages;
    }

    //  回到菜单页
    function navigateToLink1() {
            window.location.href = "http://127.0.0.1:8080/static/menu.html";
        }

    // 上一页功能
    function prevPage() {
        if (currentPage > 1) {
            currentPage--;
            updateTable(currentPage);
            updatePagination();
        }
    }

    // 下一页功能
    function nextPage() {
        const totalPages = Math.ceil(allData.length / itemsPerPage);
        if (currentPage < totalPages) {
            currentPage++;
            updateTable(currentPage);
            updatePagination();
        }
    }
    // 前往首页功能
    function firstPage() {
        if (currentPage !== 1) {
            currentPage = 1;
            updateTable(currentPage);
            updatePagination();
        }
    }

    // 前往尾页功能
    function lastPage() {
        const totalPages = Math.ceil(allData.length / itemsPerPage);
        if (currentPage !== totalPages) {
            currentPage = totalPages;
            updateTable(currentPage);
            updatePagination();
        }
    }

    // 页面加载时获取数据
    window.onload = fetchData;
</script>
</html>